﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>即时通讯</title>
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/bootstrap3.3.5/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/animate.css">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/im.css">
    <link href="/ViewV5/Chat/qqface/qqface.css" rel="stylesheet" />
    <style type="text/css">
        body {
            background: rgba(0, 0, 0, 0);
        }
    </style>
    <!--[if lte IE 8]>
    <style>
        body{ filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#bf000000', EndColorStr='#bf000000') }
    </style><![endif]-->
</head>
<body>
    <div id="div1" class="box">
        <div class="panel-box">
            <div class="panel-left">
                <!-- left header -->
                <div id='div' onmousedown="move()" class="left-header">
                    <div class="header-pic">
                        <img id="imgLoginUser" src="/ViewV5/images/IM/user2.jpg">
                    </div>
                    <!-- 头部信息 -->
                    <div class="header-info">
                        <h5 class="head-name">
                            <span id="loginUserName" class="name-wrap"></span>
                            <div style="position:relative;display:inline-block;">
                                <a href="##" data-toggle="dropdown" aria-expanded="true">
                                    <i class="font20 head-icon bg"></i>
                                </a>
                                <ul class="dropdown-menu" style="width:130px;right:0">
                                    <li>
                                        <a id="btnCreateGroup" href="#">发起群聊</a>
                                    </li>
                                    <li>
                                        <a id="btnOpenDeskTopNotice" href="#">打开桌面通知</a>
                                    </li>
                                    <li>
                                        <a id="btnOpenSound" href="#">打开声音</a>
                                    </li>
                                </ul>
                            </div>
                        </h5>
                    </div>
                </div>
                <!-- 搜索 -->
                <div class="im-search-bar">
                    <i class="font20 bg search-icon"></i>
                    <input id="txtSearch" type="text" placeholder="搜索联系人或群组" class="input-search" style="color:#ffffff">
                    <div class="search-resul" style="display:none">
                        <ul>
                            <li id="liSearchResultPerson">
                                <div class="lxr-title">
                                    联系人
                                </div>
                                <ul class="lxr-list" id="ulSearchPersonList"></ul>
                            </li>
                            <li id="liSearchResultGroup">
                                <div class="lxr-title">
                                    群组
                                </div>
                                <ul class="lxr-list" id="ulSearchGroupList"></ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 左侧功能切换+右侧 -->
                <ul id="left_ul" class="left-tab clearfix">
                    <li onclick="change(0)" class="active">
                        <i class="font20 tab-icon1 bg"></i>
                    </li>
                    <li onclick="change(1)">
                        <i class="font20 tab-icon2 bg"></i>
                    </li>
                    <li onclick="change(2)">
                        <i class="font20 tab-icon3 bg"></i>
                    </li>
                </ul>
                <!-- 左侧切换内容 -->
                <div id="left_b">
                    <!-- 1 -->
                    <div>
                        <ul id="recentUl" class="recent-list "></ul>
                    </div>
                    <!-- 2 -->
                    <div style="display: none" class="gs-jg">
                        <ul id="groupUl" class="recent-list "></ul>
                    </div>
                    <!-- 3 -->
                    <div style="display: none" class="gs-jg">
                        <div id="divDepart">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧切换内容 -->
            <div id="panel-r" style="height:100%">
                <!-- 1 -->
                <div class="panel-right">
                    <div class="panel-top-cont">
                        <div style="height:60px;padding:15px;" class="clearfix">
                            <div class="touxiang pull-left">
                                <img id="imgToUser" src="/ViewV5/images/IM/user2.jpg">
                            </div>
                            <div class="name-right pull-left">
                                <h5 id="toUserName"></h5>
                            </div>
                            <div class="hd-right pull-right">
                                <span class="hd-right-sz">
                                    <i class="bg font20" class="dropdown-toggle" data-toggle="dropdown"></i>
                                    <ul class="dropdown-menu" style="right:0;left:auto">
                                        <li>
                                            <a href="#" class="look-zl">查看资料</a>
                                        </li>
                                        <!--<li>
                                    <a href="#">取消置顶</a>
                                </li>
                                <li>
                                    <a href="#">恢复消息通知</a>
                                </li>-->
                                    </ul>
                                </span>
                                <span class="hd-right-close">
                                    <i class="bg font20"></i>
                                </span>
                            </div>
                        </div>
                        <div class="" id="window-box-t" style="overflow-y:auto;max-height:315px;">
                            <div id="msgList">
                            </div>
                        </div>
                    </div>
                    <div class="panel-bottom-cont" id="panel-bottom-cont">
                        <!-- icon -->
                        <div class="im-toolbar clearfix" style="height:33px;">
                            <div class="toolbar-item">
                                <i class="font20 bg img-icon-face"></i>
                            </div>
                            <!--   <div class="toolbar-item">
                           <i class="font20 bg img-icon-pic"></i>
                       </div>
                       <div class="toolbar-item">
                           <i class="font20 bg img-icon-file"></i>
                       </div>
                       <div class="toolbar-item">
                           <i class="font20 bg img-icon-cloud"></i>
                       </div>
                       <div class="toolbar-item">
                           <i class="font20 bg img-icon-history" data-tip-content="lalal"></i>
                       </div>-->
                        </div>
                        <!-- input -->
                        <div class="im-enter-content" id="im-enter-content" style="max-height:94px;">
                            <textarea id="imgEditor" class="im-edit-area"></textarea>
                        </div>
                        <!-- send -->
                        <div class="im-action clearfix" style="height:33px;">
                            <a class="msg-send pull-right button" id="btnSend">发送</a>
                            <p class="pull-right">按住ctrl+enter发送消息</p>
                        </div>
                    </div>
                </div>
                <!-- 2 -->
                <div class="panel-right" style="display:none">
                    <div style="height:60px;padding:15px; border-bottom: 1px solid #e5e5e5; font-size:16px;" class="clearfix">
                        <div class="name-right pull-left">
                            <h5 id="toGroupName" class="ovdot">群组</h5>
                        </div>
                        <div class="hd-right pull-right">
                            <span class="hd-right-close">
                                <i class="bg font20"></i>
                            </span>
                        </div>
                    </div>
                    <div style="height:85%;width:100%;overflow-y: auto;">
                        <div class="name-box">
                            <ul id="groupUserUl"></ul>
                        </div>
                        <div class="profile-info-ft">
                            <a href="javascript:void(0)" style="display:none" id="btnExitGroup" class="button button-create-chat"></a>
                            <a href="javascript:void(0)" style="display:none" id="btnStartGroupChat" class="button button-create-chat">开始聊天</a>
                        </div>
                    </div>
                </div>
                <!-- 3 -->
                <div style="display:none">
                    <div class="im-right-panel-header">
                        <h5 class="ovdot">组织架构</h5>
                        <span class="hd-right-close">
                            <i class="bg font20"></i>
                        </span>
                    </div>
                    <div style="height:85%;width:100%;overflow-y: auto;">
                        <div class="name-box" id="divDeptPerson">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 群组弹出层-->
        <div class="grap-cont grap animated fadeInRight" style="display:none; width:670px;" id="divGroupEdit">
            <div class="grap-cont-whit" style="width:670px;">
                <div class="clearfix top-grap">
                    <!--<img src="/ViewV5/images/IM/user2.jpg" class="pic-80 pull-left">-->
                    <div class="pull-left ml5">
                        <h4 style="font-size:16px;margin-top:10px;color:#333">设置群组名称：<input placeholder="请输入群组名称" maxlength="15" type="text" id="addGroupName" /></h4>
                        <p style="margin-top:10px;font-size:12px">已选<span id="divAddGroupPersonCount"></span>人</p>
                    </div>
                    <span class="hd-right-close pull-right">
                        <i class="bg font20" id="close-grap"></i>
                    </span>
                </div>
                <div class="grap-name-add clearfix">
                    <div style="width:200px;float:left;height:340px;overflow-y:auto" id="divDepartForGroup">
                    </div>
                    <div style="width: 200px; float: left; height: 340px; overflow-y: auto" id="divDepartPersonForGroup">
                        <div class="div_name">
                            <h6 style="padding-bottom:10px;">部门成员：</h6>
                            <span>张理想</span>
                            <span>张理想</span>
                            <span>lixiang考上了</span>
                            <span>理想</span>
                            <span>张理想</span>
                            <span>张理</span>
                        </div>
                    </div>
                    <div style="width: 200px; float: left; height: 340px; overflow-y: auto">
                        <div class="div_name">
                            <h6 style="padding-bottom:10px;">已选成员：</h6>
                            <span>张理想</span>
                            <span>张理想</span>
                            <span>lixiang考上了</span>
                            <span>理想</span>
                            <span>张理想</span>
                            <span>张理</span>
                        </div>
                        <ul class="grap-name clearfix" id="divAddGroupPerson"></ul>
                        
                    </div>
                </div>
                <div class="profile-info-ft">
                    <a href="javascript:void(0)" id="btnSaveGroup" class="button button-create-chat">保存</a>
                </div>
            </div>
        </div>
        <!-- 个人详情 -->
        <div class="grap-cont personage animated fadeInRight" style="display:none">
            <div class="grap-cont-whit">
                <div class="head clearfix">
                    <div class="pull-left">
                        <img src="/ViewV5/images/IM/user2.jpg" style="width:60px;" id="personDetailImage">
                    </div>
                    <div class="info-name pull-left">
                        <h5 id="personRealName"></h5>
                        <p id="personZhiwu"></p>
                    </div>
                    <button type="button" class="close-zl close">
                        &times;
                    </button>
                </div>
                <div class="mt10">
                    <div class="profile-info-item clearfix ng-scope" ng-if="!$root.fromSoftStone">
                        <span>部门</span>
                        <div class="info-detail" id="personDept"></div>
                    </div>
                    <div class="profile-info-item clearfix ng-scope" ng-if="!$root.fromSoftStone">
                        <span>手机</span>
                        <div class="info-detail" id="personMobile"></div>
                    </div>
                    <div class="profile-info-item clearfix ng-scope" ng-if="!$root.fromSoftStone">
                        <span>电话</span>
                        <div class="info-detail" id="personTel"></div>
                    </div>
                    <div class="profile-info-item clearfix ng-scope" ng-if="!$root.fromSoftStone">
                        <span>邮箱</span>
                        <div class="info-detail" id="personEmail"></div>
                    </div>
                </div>
                <div style="border-bottom:1px solid #f0f0f0;margin-top:20px"></div>
                <div class="mt10">
                    <div class="profile-info-item clearfix ng-scope" ng-if="!$root.fromSoftStone">
                        <span>入职</span>
                        <div class="info-detail" id="personInDate"></div>
                    </div>
                    <div class="profile-info-item clearfix ng-scope" ng-if="!$root.fromSoftStone">
                        <span>生日</span>
                        <div class="info-detail" id="personBirthday"></div>
                    </div>
                    <div class="profile-info-item clearfix ng-scope" ng-if="!$root.fromSoftStone">
                        <span>QQ</span>
                        <div class="info-detail" id="personQQ"></div>
                    </div>
                    <div class="profile-info-item clearfix ng-scope" ng-if="!$root.fromSoftStone">
                        <span>介绍</span>
                        <div class="info-detail" id="personIntro"></div>
                    </div>
                </div>
                <!--<div class="profile-info-ft">
                    <a href="javascript:void(0)" class="button button-create-chat">发起聊天</a>
                </div>-->
            </div>
        </div>

        <!-- 播放音频 -->
        <audio id="msgAudio" style="visibility:collapse">
            <source src="msg.mp3" type="audio/mp3" />
            <source src="msg.ogg" type="audio/ogg" />
        </audio>
    </div>
    <script src="/ViewV5/JS/jquery-1.11.2.min.js"></script>
    <script src="/ViewV5/CSS/bootstrap3.3.5/js/bootstrap.js"></script>
    <script type="text/javascript">
        //		-----------------------------------------
        var left_b = document.getElementById('left_b').children;
        var left_ul = document.getElementById('left_ul').children;
        var panel_r = document.getElementById('panel-r').children;
        //		------------------------------------------------------------
        var oDiv = document.getElementById('div');
        var oDiv1 = document.getElementById('div1');
        var magic = document.getElementById('magic');
        //获取聊天框内div
        var box = document.getElementById("box");
        var box_t = document.getElementById("window-box-t");
        var panel_right = document.getElementById('panel-r');
        var panel_bottom = document.getElementById('panel-bottom-cont');
        var obuttom = panel_bottom.children;
        //		-------
        panel_right.style.height = oDiv1.offsetHeight + 'px';//设置右边窗口高度和大体高度一致
        box_t.style.height = box.offsetHeight - 60 + 'px';//上半部分
        obuttom['1'].style.height = panel_bottom.offsetHeight - obuttom['0'].offsetHeight - obuttom['2'].offsetHeight + 'px';//下半部分
        //-------------------------
        var yy = 0;
        var xx = 0;
        function move(ent) {
            var event = ent || window.event  //火狐和ie兼容
            //获取点击位置
            //var x=event.clientX;
            //var y=event.clientY;
            //var otop=oDiv1.offsetTop;
            //var oleft=oDiv1.offsetLeft;
            //yy=y-otop;
            //xx=x-oleft;
            //鼠标拖动事件
            //window.document.onmousemove = domove;
            //window.document.onmouseup = nn;
        }
        function domove(ent) {
            //兼容IE和火狐浏览器兼容
            var event = ent || window.event;
            //获取移动位置
            var x = event.clientX;
            var y = event.clientY;
            //判断？？？？？？
            if (x < 0) x = 0;
            if (y < 0) y = 0;
            if (x < xx) x = x + oleft;
            if (y < yy) y = x + otop;
            //设置did的移动
            oDiv1.style.top = (y - yy) + "px";
            oDiv1.style.left = (x - xx) + "px";
        }
        ;
        //-------------聊天窗口的变换大小--------------
        function tobig(ent) {
            var event = ent || window.event  //火狐和ie兼容
            //获取鼠标点击位置
            //var x=event.clientX;
            //var y=event.clientY;
            //挪动鼠标执行函数dd()
            //window.document.onmousemove = dd;
            //window.document.onmouseup = nn;
        }
        function dd(e) {
            var ev = e || event;
            //把当前鼠标位置，赋值给div1
            //oDiv1.style.height=ev.clientY-parseInt(div1.offsetTop)+"px";
            //oDiv1.style.width=ev.clientX-parseInt(div1.offsetLeft)+"px";
            //控制聊天窗口上下部分
            // panel_right.style.height=oDiv1.offsetHeight+'px';
            // box_t.style.height=box.offsetHeight-60+'px';
            // obuttom['1'].style.height=panel_bottom.offsetHeight-obuttom['0'].offsetHeight-obuttom['2'].offsetHeight+'px';

        }
        function nn() {
            window.document.onmousemove = null;
        }

    </script>
    <script type="text/javascript">
        $(function () {
            $(".left-tab li").each(function (i) {
                $(this).click(function () {
                    $(this).addClass("active").siblings().removeClass("active");
                })
            })
            //弹出群组 关闭群组 展示使用
            $(".grap-pop").click(function () {
                $(".grap-cont.grap").show();
            })
            $("#close-grap").click(function () {
                $(".grap-cont").hide();
            })
        })

    </script>
    <script type="text/javascript" src="chat.js"></script>
    <script type="text/javascript" src="qqface/jquery-browser.js"></script>
    <script type="text/javascript" src="qqface/jquery.qqFace.js"></script>
</body>
</html>